<template>
    <div>
        <!-- 时间和按钮盒子，需要给radio,data一个初始值，复制fromatDateTime函数，在mountef中渲染 -->
        <div class="time" style="margin-top:50px">
            <div style="margin-left:5px">{{ date | formatDateTime }}</div>
            <div>
                <el-radio-group v-model="radio" size="mini">
                    <el-radio-button label="一般行业"></el-radio-button>
                    <el-radio-button label="高危行业"></el-radio-button>
                    <el-radio-button label="所有"></el-radio-button>
                </el-radio-group>
            </div>
        </div>
        <div class="box">
            <div class="box_left">
                <div class="top_two">
                    <div class="top_text">服务开展</div>
                    <!-- 三个按钮 margin 上右下左 -->
                    <div style="margin: 20px 10px 0 10px;">
                        <el-radio-group v-model="radio1" size="mini" class="top_rad">
                            <el-radio-button label="本周"></el-radio-button>
                            <el-radio-button label="月"></el-radio-button>
                            <el-radio-button label="季"></el-radio-button>
                            <el-radio-button label="年"></el-radio-button>
                        </el-radio-group>
                    </div>
                </div>

                <div class="left_box_continer">
                    <div class="left">
                        <div id="main1"></div>
                        <el-row style="margin-bottom:5px">
                            <el-col :span="14">保单数</el-col>
                            <el-col :span="10" class="pen">{{ "xx" }}笔</el-col>
                        </el-row>
                        <el-row style="margin-bottom:5px">
                            <el-col :span="14">保单数</el-col>
                            <el-col :span="10" class="pen">{{ "xx" }}笔</el-col>
                        </el-row>
                        <el-row style="margin-bottom:5px">
                            <el-col :span="14">保单数</el-col>
                            <el-col :span="10" class="pen">{{ "xx" }}笔</el-col>
                        </el-row>
                    </div>
                    <!-- 第二个带图表的盒子 -->
                    <div class="left">
                        <div id="main2"></div>
                        <el-row style="margin-bottom:5px">
                            <el-col :span="14">保单数</el-col>
                            <el-col :span="10" class="pen">{{ "xx" }}笔</el-col>
                        </el-row>
                        <el-row style="margin-bottom:5px">
                            <el-col :span="14">保单数</el-col>
                            <el-col :span="10" class="pen">{{ "xx" }}笔</el-col>
                        </el-row>
                        <el-row style="margin-bottom:5px">
                            <el-col :span="14">保单数</el-col>
                            <el-col :span="10" class="pen">{{ "xx" }}笔</el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <div class="box_center">
                <div class="boardone_content">
                    <div class="top_text">承保理赔</div>
                    <div style="margin: 20px 10px 0 210px;">
                        <el-radio-group v-model="radio1" size="mini" class="top_rad">
                            <el-radio-button label="本周"></el-radio-button>
                            <el-radio-button label="月"></el-radio-button>
                            <el-radio-button label="季"></el-radio-button>
                            <el-radio-button label="年"></el-radio-button>
                        </el-radio-group>
                    </div>
                </div>
                <div class="boa1">
                    <el-progress type="circle" :percentage="25" style="margin-top:10px"></el-progress>
                    <el-progress type="circle" :percentage="100" status="success" style="margin-top:10px"></el-progress>
                    <div class="boa" style="width:230px;margin-right: -15px;">
                        <el-row>
                            <el-col :span="16" class="pen" style="">服务实效</el-col>
                            <el-col :span="8" class="pen">0项</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">家次时间</el-col>
                            <el-col :span="7">超当日</el-col>
                            <el-col :span="6">1H内</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8" class="pen">0H</el-col>
                            <el-col :span="8" class="pen">0次</el-col>
                            <el-col :span="8" class="pen">5次</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12" class="pen">报告实效</el-col>
                            <el-col :span="12" class="pen">0项</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">编制周期</el-col>
                            <el-col :span="8">超10日</el-col>
                            <el-col :span="8">最长</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8" class="pen">34天</el-col>
                            <el-col :span="8" class="pen">5项</el-col>
                            <el-col :span="8" class="pen">226日</el-col>
                        </el-row>
                    </div>
                </div>

            </div>
            <div class="box_right">
                <div class="boardthree">
                    <div class="boardone_top">
                        <div class="top_text">快捷入口</div>
                    </div>
                    <div class="img" style="margin-left:15px">
                        <img
                            src="" />
                        <div>机构考评</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="tail">
            <el-tabs v-model="active">
                <el-tab-pane label="服务跨度" name="Span">
                    <Span></Span>
                </el-tab-pane>
                <el-tab-pane label="成效分布" name="distribution">
                    <Distribution></Distribution>
                </el-tab-pane>
            </el-tabs>
        </div>


    </div>
</template>
<script>
import Span from '../parts/span.vue';
import Distribution from '../parts/distribution.vue';

export default {
    data() {
        return {
            active: 'distribution',
            radio1: "本周",
            date: new Date(),
            radio: "所有",
        };
    },
    filters: {
        formatDateTime(value) {
            let date = new Date(value);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? "0" + MM : MM;
            let d = date.getDate();
            d = d < 10 ? "0" + d : d;
            let h = date.getHours();
            h = h < 10 ? "0" + h : h;
            let m = date.getMinutes();
            m = m < 10 ? "0" + m : m;
            let s = date.getSeconds();
            s = s < 10 ? "0" + s : s;
            return y + "年" + MM + "月" + d + "日" + h + ":" + m + ":" + s;
        }
    },
    methods: {
        chart(Id) {
            let angle = 0; //角度，用来做简单的动画效果的
            let value = 78; //图上角度数据
            let chartDom = document.getElementById(Id);
            let myChart = this.$echarts.init(chartDom);
            let option = {
                title: {
                    text: "{a|" + value + "}{c|%}",
                    x: "center",
                    y: "center",
                    textStyle: {
                        rich: {
                            a: {
                                fontSize: 18,
                                color: "#3e6ff5",
                                fontWeight: "bold",
                            },
                            c: {
                                fontSize: 18,
                                color: "#3e6ff5",
                                fontWeight: "normal",
                            },
                        },
                    },
                },
                series: [
                    //内环
                    {
                        name: "",
                        type: "custom",
                        coordinateSystem: "none",
                        renderItem: function (params, api) {
                            return {
                                type: "arc",
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: (Math.min(api.getWidth(), api.getHeight()) / 2.3) * 0.65,
                                    startAngle: ((0 + -angle) * Math.PI) / 180,
                                    endAngle: ((360 + -angle) * Math.PI) / 180,
                                },
                                style: {
                                    stroke: "#3e6ff5",
                                    fill: "transparent",
                                    lineWidth: 0.5,
                                },
                                silent: true,
                            };
                        },
                        data: [0],
                    },
                    //外环
                    {
                        name: "",
                        type: "pie",
                        radius: ["85%", "70%"],
                        silent: true,
                        clockwise: true,
                        startAngle: 90,
                        z: 0,
                        zlevel: 0,
                        label: {
                            normal: {
                                position: "center",
                            },
                        },
                        data: [
                            {
                                value: value,
                                name: "",
                                itemStyle: {
                                    normal: {
                                        //外环发光
                                        borderWidth: 0.5,
                                        shadowBlur: 20,
                                        borderColor: "#fff",
                                        shadowColor: "#fff",
                                        color: {
                                            // 圆环的颜色
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: "#3e6ff5", // 0% 处的颜色
                                                },
                                                {
                                                    offset: 1,
                                                    color: "#3e6ff5", // 100% 处的颜色
                                                },
                                            ],
                                        },
                                    },
                                },
                            },
                            {
                                value: 100 - value,
                                name: "",
                                label: {
                                    normal: {
                                        show: false,
                                    },
                                },
                                itemStyle: {
                                    normal: {
                                        color: "#f3f3fb",
                                    },
                                },
                            },
                        ],
                    },
                ],
            };
            option && myChart.setOption(option);
        },
    },
    computed: {},
    mounted() {
        var that = this;
        this.timer = setInterval(() => {
            that.date = new Date(); //修改数据date
        }, 1000);
        this.chart("main1");
        this.chart("main2");
    },
    components: { Span, Distribution }
}
</script>
<style>
.boa1 {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    margin-left: 5px;

}

.el-row {
    color: rgb(136, 136, 136);
    font-size: 14px;
}

.pen {
    color: rgb(51, 51, 51);
    font-size: 16px;
    font-weight: 700;
}

#main2,
#main1 {
    width: 100px;
    height: 100px;
    margin: auto;
    margin-top: 5px;
}

.left {
    width: 35%;
    border: 2px dashed rgb(194, 194, 194);
    border-radius: 5px;
    margin-bottom: 20px;
}

.top_two {
    display: flex;
    justify-content: space-between;

}

.left_box_continer {
    display: flex;
    justify-content: space-between;
    margin: 0 20px 10px 20px;
    margin-top: 10px;
}

.top_text {
    margin-top: 20px;
    width: 80px;
    height: 30px;
    font-size: 18px;
    font-weight: 700;
    border-left: 5px solid #3e6ff5;
    padding-left: 20px;
}

.box {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;

}

.box_left {
    /* display: flex;
    justify-content: space-between; */
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 12px 12px 32px #d4d4d4,
        -12px -12px 32px #ffffff;
}

.boardone_content {
    display: flex;
}

.box_center {
    width: 510px;
    /* display: flex; */
    /* justify-content: space-between; */
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 12px 12px 32px #d4d4d4,
        -12px -12px 32px #ffffff;
}

.box_right {
    display: flex;
    width: 310px;
    /* justify-content: space-between; */
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 12px 12px 32px #d4d4d4,
        -12px -12px 32px #ffffff;
}
</style>